<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/douyu.png"/>

    <title>斗鱼播放</title>

    <script src="js/util.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/flv.js/1.4.2/flv.min.js"></script>

    <style>
        h6, p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .top {
            padding: 1px;
        }

        .dm {
            border: 1px solid #ced4da;
            /*overflow-y: scroll;*/
            overflow-y: hidden;
            overflow-X: hidden;
            border-radius: 3px;
            padding: 1px;
            border-top-color: #f8f9fa;
        }
    </style>

</head>

<body>


<div class="container" style="max-width: 100%;">
    <div class="row" style="max-height: 100%">
        <div class="col-lg-9" style="padding-left: 2px;padding-right: 2px;">
            <div class="card text-left text-muted">
                <video id="video" controls autoplay style="width: 100%;margin: 0 auto;">
                    Your browser is too old which doesn't support HTML5 video.
                </video>
                <div class="card-body" style="padding:2px 2px;">
                    <div style="float:left;"><img class="img-thumbnail" style="width: 58px; height: 58px;"/></div>
                    <div id="center" style="float:left;margin-left: 5px;margin-top: 3px;">
                        <h6 class="card-title">Title</h6>
                        <p class="card-text">Body</p>
                    </div>
                    <div style="float: left; margin: 9px auto;">
                        <a href="javascript:void(0);">
                            <img id="favo" src="img/nofavo.png" style="width: 40px;height: 40px;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3" style="padding-left: 2px;padding-right: 2px;margin-top: 2px;">
            <!--<div class="top">-->
            <!--<button class="btn btn-outline-primary btn-block" id="favo">关注</button>-->
            <!--</div>-->
            <div class="dm">

            </div>
        </div>
    </div>
</div>

<!-- tips 0 -->
<div class="modal fade" id="tips" style="margin-top: 100px;" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm btn-block" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- tips 1 -->

<script src="js/play.js"></script>

</body>

</html>